<template>
    <div class="bookdetail-container">
        <!--小球动画-->
        <transition
            @before-enter="beforeEnter"
            @enter="enter"
            @after-enter="afterEnter">
            <div class="ball" v-show="showBall" ref="ball"></div>
        </transition>

        <!--商品轮播区-->
        <div class="mui-card">
            <div class="mui-card-content">
                <div class="mui-card-content-inner">
                    <swiper :dataItem="bookDetailData.swiperData" :isfull="false"></swiper>
                </div>
            </div>
        </div>

        <!--商品购买区域-->
        <div class="mui-card">
            <div class="mui-card-header">{{ bookDetailData.title }}</div>
            <div class="mui-card-content">
                <div class="mui-card-content-inner">
                    <p class="price">
                        定价：
                        <del>￥{{ bookDetailData.price }}</del> 销售价：
                        <span class="now_price">￥{{ bookDetailData.sellPrice }}</span>
                    </p>
                    <p>
                        购买数量：
                        <numbox v-model="selectedCount" :max="bookDetailData.stockQuantity"></numbox>
                    </p>
                    <p>
                        <mt-button type="primary" size="small">立即购买</mt-button>
                        <mt-button type="danger" size="small" v-tap="addToShopCart">加入购物车</mt-button>
                    </p>
                </div>
            </div>
        </div>

        <!--商品参数区域-->
        <div class="mui-card">
            <div class="mui-card-header">商品参数</div>
            <div class="mui-card-content">
                <div class="mui-card-content-inner">
                    <p>商品编号：{{ bookDetailData.goodsNo }}</p>
                    <p>库存数量：{{ bookDetailData.stockQuantity }}</p>
                    <p>出版时间：{{ bookDetailData.publishTime }}</p>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import swiper from "../../components/Swiper.vue";
import numbox from "../../components/DetailNumber.vue";

export default {
    name: "BookDetail",
    components: {
        swiper,
        numbox
    },

    data() {
        return {
            // 将路由参数对象中的 id 挂载到 data，方便后面调用
            id: this.$route.params.id,
            // 保存用户选中的商品数量
            selectedCount: 1,
            bookDetailData: {
                // 轮播图数据
                swiperData: [],
            },
            // 设置小球默认显示状态
            showBall: false,
        }
    },

    created() {
        console.log("get detail of book");
        this.initData();
    },

    methods: {
        initData() {
            this.$axios.get("/book/getDetail/" + this.id).then(res => {
                if (res.data.code === "200") {
                    this.bookDetailData = res.data.data;
                }
            }).catch(err => {
                console.error("get detail error: ", err);
            })
        },

        addToShopCart() {
            this.showBall = !this.showBall
            console.log("this.selectedCount", this.selectedCount);
            const goodsInfo = {
                id: parseInt(this.id),
                count: this.selectedCount,
                price: this.bookDetailData.sellPrice,
                selected: true,
                amount: this.selectedCount * this.bookDetailData.sellPrice,
            };

            // save in shop cart
            this.$store.commit("addCart", goodsInfo);
        },

        beforeEnter(el) {
            el.style.transform = "translate(0, 0)";
        },

        enter(el, done) {
            el.offsetWidth;

            // 获取小球在页面中的位置
            const ballPosition = this.$refs.ball.getBoundingClientRect();
            const badgePosition = document.getElementById("shopCart").getBoundingClientRect();
            const xDist = badgePosition.left - ballPosition.left;
            const yDist = badgePosition.top - ballPosition.top;

            el.style.transform = `translate(${xDist}px, ${yDist}px)`;
            el.style.transform = "0.5s all cubic-bezier(.4, -0.3, 1, .68)";
            // next
            done();
        },

        afterEnter(el) {
            this.showBall = !this.showBall;
        }
    }
}
</script>

<style lang="scss" scoped>
.bookdetail-container {
    background-color: #eee;
    overflow: hidden;

    .now_price {
        color: red;
        font-size: 16px;
        font-weight: bold;
    }
    .ball {
        width: 15px;
        height: 15px;
        border-radius: 50%;
        background-color: red;
        position: absolute;
        z-index: 99;
        top: 390px;
        left: 146px;
    }
}
/deep/ .mui-card-content {
    background-color: aliceblue;
}
</style>